{extend name="pub/base" /}
{block name="head"}
<title>编辑作品</title>
<style>
    #formBasForm {
        max-width: 700px;
        margin: 30px auto;
    }

    #formBasForm .layui-form-item {
        margin-bottom: 25px;
    }
</style>
{/block}
{block name="main"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表单开始 -->
            <form class="layui-form" id="formBasForm" lay-filter="formBasForm">
                <input type="hidden" name="articleid" value="{$book.articleid}">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">作品名称:</label>
                    <div class="layui-input-block">
                        <input name="articlename" value="{$book.articlename}" class="layui-input"
                               lay-verType="tips" lay-verify="required" required/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">关键词:</label>
                    <div class="layui-input-block">
                        <input name="keywords" value="{$book.keywords}" class="layui-input"
                               lay-verType="tips" lay-verify="password"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">主角:</label>
                    <div class="layui-input-block">
                        <input name="roles" value="{$book.roles}" class="layui-input"
                               lay-verType="tips" lay-verify="password"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">题材：</label>
                    <div class="layui-input-block">
                        <select name="sortid" lay-verType="tips" lay-verify="required" required>
                            {volist name="cates" id="vo"}
                            <option value="{$vo.sortid}" {$book.sortid==$vo.sortid?"selected":""}>
                                {$vo.cate_name}
                            </option>
                            {/volist}
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">封面:</label>
                    <div class="layui-input-block">
                        <button id="file-btn-upload" class="layui-btn layui-btn-sm layui-btn-normal icon-btn"
                                type="button">
                            <i class="layui-icon">&#xe681;</i>上传文件
                        </button>
                        <img class="layui-upload-img" id="pic" src="{$book.cover_url}"
                             style="width: 200px;height: auto;margin: 0 10px 10px 0;">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-filter="formBasSubmit" lay-submit>&emsp;提交&emsp;</button>
                        <button type="reset" class="layui-btn layui-btn-primary">&emsp;重置&emsp;</button>
                    </div>
                </div>
            </form>
            <!-- //表单结束 -->
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script>
    layui.use(['layer', 'form', 'laydate', 'upload'], function () {
        var $ = layui.jquery
        var form = layui.form
        var upload = layui.upload

        /* 监听表单提交 */
        form.on('submit(formBasSubmit)', function (data) {
            $.ajax({
                url: "{:url('edit')}",
                type: 'post',
                data: $('form').serialize(),
                success(res) {
                    subResHandle(res)
                }
            })
            return false;
        });

        // 上传
        upload.render({
            elem: '#file-btn-upload',
            accept: 'images',
            exts: 'jpg|png|jpeg',
            url: '{:url("upload")}',
            data:{
                articleid:'{$book.articleid}'
            },
            before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#pic').attr('src', result); //图片链接（base64）
                });
            },
            done: function (res, index, upload) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
            },
            error: function (index, upload) {
                //请求异常回调
                layer.msg('很抱歉，上传出现异常');
            }
        });
    });
</script>
{/block}